<app-input field="usernameAttribute" [change]="provider" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.uap.usernameAttribute">
      {{ messages.services_form_label_uap_usernameAttribute }}
    </mat-placeholder>
    <input matInput required [matAutocomplete]="auto"
           [(ngModel)]="provider.usernameAttribute">
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
  <mat-icon appHelp
            i18n-matTooltip="services.form.tooltip.uap.usernameAttribute"
            [matTooltip]="messages.services_form_tooltip_uap_usernameAttribute">
  </mat-icon>
</app-input>

<app-input field="encryptUserName" [change]="provider" [orig]="original">
  <mat-checkbox [(ngModel)]="provider.encryptUserName">
    <ng-container i18n>
      Encrypt Username
    </ng-container>
  </mat-checkbox>
  <mat-icon appHelp
            i18n-matTooltip="encpytUsername"
            matTooltip="If checked the username attribute will be encrypted using the defined public key for the service">
  </mat-icon>
  <mat-hint align="end">
    <app-hint></app-hint>
  </mat-hint>
</app-input>

<app-input field="canonicalizationMode" [change]="provider" [orig]="original">
  <mat-form-field class="textInput">
    <mat-placeholder i18n-placeholder="services.form.label.uap.canonicalizationMode">
      {{ messages.services_form_label_uap_canonicalizationMode }}
    </mat-placeholder>
    <mat-select [(ngModel)]="provider.canonicalizationMode">
      <mat-option *ngFor="let opt of data.formData.canonicalizationModes" [value]="opt">
        {{ opt }}
      </mat-option>
    </mat-select>
    <mat-hint align="end">
      <app-hint></app-hint>
    </mat-hint>
  </mat-form-field>
</app-input>

<mat-autocomplete style="width:300px" #auto="matAutocomplete">
  <mat-option *ngFor="let opt of formData.availableAttributes" [value]="opt">{{ opt }}</mat-option>
</mat-autocomplete>